<template>
  <div>
    <RlSelect v-model="test" placeholder="请选择" :options="options"></RlSelect>
    <RlSelect v-model="test" placeholder="柯清除请选择" :options="options" clearable></RlSelect>
    <RlSelect v-model="test" placeholder="请选择" :options="options" :renderLabel="customRender"></RlSelect>
    <RlSelect v-model="test" placeholder="可过滤请选择" :options="options" filterable></RlSelect>
  </div>
</template>

<script setup lang="ts">
import RlSelect from '@/components/Select/Select.vue'
import { h, ref } from 'vue'
defineOptions({
  name:'SelectView'
})
const options = [
  { label: '读书', value: '1'},
  { label: '发呆', value: '2'},
  { label: '手工', value: '3'},
  { label: '瑜伽', value: '4',disabled:true}
]
const test = ref('1')
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const customRender = (option:any) => {
  return h('div',{className:'label'},[h('b',option.label)])
}
</script>